<template>
	<div class="index_login-wrap">
		<el-form :rules="rules" ref="login">
			<h2 class="notselect">吹个球智慧信息系统</h2>
			<ul>
				<li class="username">
					<i class="el-icon-user"></i>
					<el-form-item label="" prop="username">
					<el-input class="" v-model="param.username" name="username" autofocus="" autocomplete="off" placeholder="登录账号"
						 style="height: 43px;"/>
						</el-form-item>
				</li>
				<li class="password">
					<i class="iconfont iconmima"></i>
					<el-form-item label="" prop="password">
					<el-input class="" v-model="param.password"  name="password" maxlength="32" placeholder="登录密码" style="height: 43px;"/>
				   	</el-form-item>
				</li>

				<li class="">
					<button @click="submitForm" type="submit" class="layui-btn full-width" style="width: 100%;border: 0;height: 43px;border-radius: 5px;">立即登入</button>
				</li>
			</ul>
		</el-form>
	</div>
</template>

<script>
	import {
		fetchData,
		formitAdd,
		list,
		edict,
		login
	} from '../../api/index';
	export default {
		data: function() {
			return {
				param: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入登录密码',
						trigger: 'blur'
					}],
				},
			};
		},
		methods: {
			submitForm() {
				this.$refs.login.validate(valid => {
					if (valid) {
						let query = {
							"username": this.param.username,
							"password": this.param.password,
						}
						// login(query).then(res => {
						// 	console.log(res);
						// 	if (res.code == 500) {
						// 		this.$message.error(res.msg);
						// 	} else {
						// 		this.$message.success('登录成功');
						// 		localStorage.setItem('ms_username', this.param.username);
						// 		localStorage.setItem('ms_password', this.param.password);
						// 		localStorage.setItem('company_id', res.company_id);
						// 		localStorage.setItem('user_id', res.user_id);

						// 		this.$router.push('/');
						// 	}
						// });
						// this.$message.success('登录成功');
						localStorage.setItem('ms_username', this.param.username);
						this.$router.push('/Dashboard');
					} else {

						console.log('error submit!!');
						return false;
					}
				});
			},
		},
	};
</script>

<style scoped>
	* {
		list-style: none;
	}
   /deep/ .el-form-item__error{
	   width: 100px;
	   position: absolute;
	   right: 10px;
	   left: initial;
	   top: 14px;
	   text-align: right;
	   color: #ff0 !important
   }
	.index_login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		
	}

	.index_login-wrap form {
		top: 50%;
		left: 50%;
		width: 300px;
		position: absolute;
		margin-top: -250px;
		margin-left: -150px;
	}

	.index_login-wrap form h2 {
		color: #fff;
		padding: 20px 0;
		font-size: 25px;
		text-align: center;
		font-weight: 700;
		letter-spacing: 3px;
		text-shadow: #000 0.05em 0.05em 0.05em;
	}

	.index_login-wrap form ul li {
		position: relative;
		margin-top: 20px;
		text-shadow: #000 0.1em 0.1em 0.1em;
	}

	.index_login-wrap form ul li /deep/ input {
		width: 100%;
		color: #fff;
		height: 45px;
		padding: 0 15px;
		font-size: 14px;
		line-height: 1em;
		text-indent: 35px;
		border-radius: 6px;
		letter-spacing: 1px;
		background: rgba(0, 0, 0, 0.12);
		text-shadow: #000 0.1em 0.1em 0.1em;
		-webkit-text-fill-color: #fff !important;
		border: 0;
		box-shadow: 0 2px 3px 0 rgb(0 0 0 / 30%) inset !important;
		outline: none;
	}

	.index_login-wrap form ul li i {
		color: #fff;
		font-size: 18px;
		position: absolute;
		padding: 14px 15px 13px 20px;
	}

	/* .index_login-wrap .ms-login {
		position: absolute;
		left: 50%;
		top: 56%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		overflow: hidden;
	} */

	.index_login-wrap .ms-content {
		padding: 30px 30px;
	}

	.index_login-wrap .login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 100%;
		height: 36px;
		margin-bottom: 10px;

	}

	.login-btn .el-button--primary {
		color: #FFF;
		background-color: rgb(235, 56, 12);
		border-color: rgb(235, 56, 12)
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}
</style>
